import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { formatDate } from '../../utils/format'
import { PINK, DARK_BLUE, GRAY } from '../../constants'
import './index.scss'


const randomColorPool = [PINK, DARK_BLUE, GRAY]
const randomColor = index => randomColorPool[index % 3]

class CourseItem extends Component {

    onNavigateTo(id) {
        Taro.navigateTo({ url: '/pages/detail/index?id=' + id })
    }

    render() {

        const { index, id, title, start_time, address } = this.props
        return (
            <View className='course-item' style={{ backgroundColor: randomColor(index) }} onClick={this.onNavigateTo.bind(this, id)}>
                <Text selectable className='course-item-name'>{title}\n</Text>
                <Text selectable className='course-item-date'>{formatDate(start_time)}\n</Text>
                <Text selectable className='course-item-address'>{address}</Text>
            </View>
        )
    }
}

export default CourseItem
